<template>
  <div>
    <el-form
      label-width="auto"
      :rules="rules"
      :model="form"
      ref="formRef"
      status-icon
    >
      <el-row :gutter="20">
        <el-col :span="12" :xs="24">
          <el-form-item label="早上体温" prop="morningTemp">
            <el-input
              v-model.trim="form.morningTemp"
              autocomplete="off"
              placeholder="请输入体温"
              size="large"
              clearable
            />
          </el-form-item>

          <el-form-item label="中午体温" prop="afternoonTemp">
            <el-input
              v-model.trim="form.afternoonTemp"
              autocomplete="off"
              placeholder="请输入体温"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item label="晚上体温" prop="nightTemp">
            <el-input
              v-model.trim="form.nightTemp"
              autocomplete="off"
              placeholder="请输入体温"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item label="途径地区">
            <el-input
              v-model.trim="form.recentZone"
              type="textarea"
              placeholder="请输入途径地区&#10;输入格式如下：某地->某地->某地..."
              clearable
              rows="7"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xs="24">
          <el-form-item label="症状">
            <el-select
              v-model="form.symptom"
              class="m-2"
              placeholder="请选择症状"
              size="large"
              clearable
              filterable
            >
              <el-option
                v-for="item in symptoms"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="近期所在地">
            <el-cascader
              placeholder="请选择所在地"
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
              clearable
              filterable
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="健康状态">
            <el-select
              v-model="form.healthStatus"
              class="m-2"
              placeholder="请选择健康状态"
              size="large"
              clearable
              filterable
            >
              <el-option
                v-for="item in health"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="风险区">
            <el-select
              v-model="form.riskZone"
              class="m-2"
              placeholder="请选择所处风险区"
              size="large"
              clearable
              filterable
            >
              <el-option
                v-for="item in riskZones"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="save_info"> 确认 </el-button>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

export default {
  name: 'my_recording',
  data() {
    return {
      //中国省市区级
      options: regionData, //省市区数据
      selectedOptions: [], // 选中的地区
      //表单效验
      rules: {
        morningTemp: [{ required: true, message: '温度不能为空' }],

        afternoonTemp: [{ required: true, message: '温度不能为空' }],
        nightTemp: [{ required: true, message: '温度不能为空' }]
      },
      //症状
      symptoms: [
        {
          value: '咳嗽',
          label: '咳嗽'
        },
        {
          value: '发烧',
          label: '发烧'
        },
        {
          value: '发烧咳嗽',
          label: '发烧咳嗽'
        },
        {
          value: '不发烧咳嗽',
          label: '不发烧咳嗽'
        },
        {
          value: '正常',
          label: '正常'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      //风险区
      riskZones: [
        {
          value: '高风险',
          label: '高风险'
        },
        {
          value: '中风险',
          label: '中风险'
        },
        {
          value: '低风险',
          label: '低风险'
        }
      ],
      //健康状态
      health: [
        {
          value: '健康',
          label: '健康'
        },
        {
          value: '不健康',
          label: '不健康'
        }
      ],
      user: localStorage.getItem('user')
        ? JSON.parse(localStorage.getItem('user'))
        : {},
      form: {
        username: '',
        sex: '',
        age: 0,
        phone: '',
        morningTemp: '',
        afternoonTemp: '',
        nightTemp: '',
        symptom: '',
        recentHome: '',
        riskZone: '',
        recentZone: '',
        healthStatus: '',
        createTime: new Date(),
        uid: 0
      },
      nowtime: new Date(),

      showBox: true, //是否显示
      isFillIn: true,
      filledList: []
    }
  },

  mounted() {
    console.log(this.form)
    this.form.username = this.user.username
    this.form.sex = this.user.sex
    this.form.age = this.user.age
    this.form.phone = this.user.phone
    this.form.createTime = this.nowtime
    this.form.uid = this.user.id
  },

  methods: {
    //初始化省市
    handleChange(value) {
      console.log(value)
      if (value != null) {
        console.log(value)
        console.log(
          CodeToText[value[0]],
          CodeToText[value[1]],
          CodeToText[value[2]]
        )
        this.form.provinceCode = value[0]
        this.form.cityCode = value[1]
        this.form.areaCode = value[2]
        this.form.recentHome =
          CodeToText[value[0]] +
          '/' +
          CodeToText[value[1]] +
          '/' +
          CodeToText[value[2]]
        console.log('页面选择:' + this.form.recentHome)
      } else {
        this.form.recentHome = ''
      }
    },

    traverseFormData(formData) {
      // 遍历表单对象的属性，检查属性的值是否为空
      var formValid = true
      Object.keys(formData).forEach(function (key) {
        console.log(formData[key])
        if (!formData[key]) {
          formValid = false
        }
      })
      return formValid
    },

    save_info() {
      this.myref()

      // 将表单数据转化为字符串
      var b = JSON.stringify(this.form)
      // 检查表单数据是否为空
      var formValid = this.traverseFormData(this.form)
      console.log(formValid)
      if (b != '{}' && formValid) {
        this.$http.post('/healthclock', this.form).then((res) => {
          console.log(res)
          if (res.status == '200') {
            this.$message.success('打卡成功')
            // this.$router.go(-1)

            // this.$emit('changeShowBox', this.showBox);

            // 在已打卡tab标签页中新增一条打卡数据
            this.filledList.push({
              /* 打卡数据对象 */
              uid: this.form.uid,
              time: this.form.createTime
            })
            // const filledListnew = JSON.parse(JSON.stringify(this.filledList))
            // console.log(JSON.parse(JSON.stringify(this.filledList)))

            this.$router.push({
              path: '/front/myheathclock',
              query: {
                showBox: false,
                isFillIn: true,
                time: this.form.createTime,
                // ArrayList: filledListnew
              }
            })
          }
        })
      } else {
        console.log('123')
        this.$message.error('保存失败')
      }
    },
    myref() {
      this.$refs['formRef'].validate((valid) => {
        console.log(valid)
      })
    },
    timeformat(row) {
      return this.$moment(row.createTime).format('yyyy-MM-DD HH:ss')
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: right;
}
</style>